<%@ page import="com.nebula.common.Const" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><%=Const.SYSTEM_NAME%>-登录</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/Base.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">

    <!--[if lt IE 9]>
    <script src="/assets/html5shiv/html5shiv.min.js"></script>
    <script src="/assets/respond/respond.js"></script>
    <![endif]-->
    <style>
        .error-info {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-xs-offset-4 col-xs-6 clearfix">
            <form action="${pageContext.request.contextPath}/loginServlet" role="form" class="form-signin"
                  method="post">
                <h2 class="form-signin-heading text-center">用户登录</h2>
                <input type="text" class="form-control" placeholder="用户名" required autocomplete="off"
                       oninvalid="setCustomValidity('请输入用户名');" oninput="setCustomValidity('');"
                       id="username" name="username" autofocus>
                <input type="password" class="form-control mt-5" placeholder="密码" required autocomplete="off"
                       oninvalid="setCustomValidity('请输入密码');" oninput="setCustomValidity('');" id="password"
                       name="password">
                <button type="button" class="btn btn-primary btn-block mt-5" id="login">登录</button>
                <div id="form-footer" class="mt-5">
                    <span class="error-info pull-left" id="errMsg"></span>
                    <p class="pull-right">还未注册? <a href="register.jsp">立即注册</a> | <a href="forgot.jsp">忘记密码?</a></p>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/assets/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("#login").click(function () {
            var username = $("#username").val(), password = $("#password").val();
            if (username.length === 0) {
                $("#errMsg").text("用户名不能为空");
                $("#username").focus();
                return;
            }
            if (password.length === 0) {
                $("#errMsg").text("密码不能为空");
                $("#password").focus();
                return;
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/user",
                type: "post",
                data: {
                    method: "login",
                    username: username,
                    password: password
                },
                dataType: "json",
                success: function (data) {
                    if (data.status === 20001) {
                        $("#errMsg").text(data.msg);
                        $("#username").focus();
                    } else if (data.status === 20000) {
                        window.location.href = "${pageContext.request.contextPath}/home";
                    }
                }
            });
        });

        $("#username, #password").on("input", function () {
            $("#errMsg").text("");
        });

        $("#username, #password").on("keyup", function (e) {
            if (e.which === 13) {
                $("#login").click();
            }
        });
    });
</script>
</body>
</html>
